import { PadMockup } from "./PadMockup"

const messages = [
  { id: 1, text: "Hey there! 👋", from: "user" },
  { id: 2, text: "Hello! How can I help you today?", from: "bot" },
  { id: 3, text: "I'd like to know more about your services.", from: "user" },
]

const Content: React.FC = () => (
  <div className="flex flex-col h-full bg-gray-50">
    {/* Header */}
    <div className="p-4 bg-blue-600 text-white font-semibold text-lg rounded-t-[1.5rem]">
      Support Chat
    </div>

    {/* Messages */}
    <div className="flex-1 overflow-y-auto px-4 py-2 space-y-3">
      {messages.map((msg) => (
        <div
          key={msg.id}
          className={`max-w-[75%] px-4 py-2 rounded-xl ${
            msg.from === "user"
              ? "bg-blue-500 text-white self-end"
              : "bg-gray-200 text-gray-800 self-start"
          }`}
        >
          {msg.text}
        </div>
      ))}
    </div>

    {/* Input */}
    <div className="p-4 border-t flex items-center gap-2">
      <input
        type="text"
        placeholder="Type a message..."
        className="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
      />
      <button className="bg-blue-500 text-white px-4 py-2 rounded-lg">
        Send
      </button>
    </div>
  </div>
)

export default function PadChatDemo() {
  return (
    <PadMockup className="my-10">
      {/* <NotFoundPage /> */}
      <Content />
    </PadMockup>
  )
}
